<!--erp订单列详情-->
<template>
  <div class="contain">
    <app-header></app-header>
    <div class="dt-head h129" :class="{add:todolist.BillState == 'P03'}">
      <div class="dt-head-fix">
        <template v-if="todolist.BillState == 'P03'">
          <detail-header :status="'请在ERP中下单'" :id="todolist"></detail-header>
        </template>
        <template v-else>
          <detail-header :id="todolist"></detail-header>
        </template>
        <div class="form-wrap mb30" v-if="todolist.BillState == 'P03'">
          <div class="form-wrap-row">
            <div class="line displayflex">
              <div class="label">ERP订单号</div> 
              <div class="ipt flex1"><input type="text" placeholder="点击输入ERP单号" v-model="erpNum" id="erpNum"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 撤回start -->
    <!-- <div class="detail-fedbck" v-if="recallBillShow">
      <div class="df-head cf">
        <span class="pic f-l"><img src=""></span>
        <span class="f-l">陈恩铚</span>
        <span class="time f-l">2017-09-04  12:30:30</span>
      </div>
      <div class="df-body">
        <p>注意仔细看，这次订单量有点多，辛苦了！</p>
        <ul class="pic cf">
          <li><img src=""/></li>
        </ul>
        <div class="voice-mail">
          <em>语音留言:</em>
          <span class="iconfont icon-yuyin1"></span>
          <span class="iconfont icon-yuyin1"></span>
          <span class="iconfont icon-yuyin1"></span>
        </div>
      </div>
      <p class="detail-mark ft17 linet gray" v-if="recallMsg">备注：{{recallMsg}}</p>
      <div class="tag-state"><img src="~images/icon/tag_ych.png"></div>
    </div> -->
    <!-- 撤回end -->
    
    <!--tab-->
    <template v-if='!recallBillShow'>
      <div class="lltab mb10 ft14">
        <tab bar-active-color="#77babd" 
             defaultColor="#333333"
             active-color="#77babd"
             :line-width='2'>
          <tab-item selected 
            @on-item-click="tab=true">商品信息</tab-item>
          <tab-item v-if="todolist.BillState=='P11'"
            @on-item-click="tab=false">缺货反馈</tab-item>
        </tab>
      </div>
      <div class="detail-tab-lft" v-if="tab">
        <div class="detail-supply">
          <i class="iconfont icon-supplier ft17"></i>
          {{todolist.SupplierName}}
        </div>
        <!-- 快速下单的详情start -->
        <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
          <voice-msg :id="todolist"></voice-msg>
        </div>
        <!-- 快速下单的详情end -->

        <div class="detail-goods-list" v-if="tab">
          <div class="displayflex list-goods-warp" v-for="item in tododetail">
            <div class="pic">
              <img :src="item.PictContent | filterImgUrl">
            </div>
            <div class="msg flex1">
              <p class="ft17">{{item.SupplierGoodsName}}</p>
              <p>{{item.SupplierGoodsSpec}}</p>
              <p>{{item.Producer}}</p>
              <p class="list-tag drug">
                <em class="tag">采购价</em>
                <i class="price">￥{{item.SupplierPrice || 0}}</i>
              </p>
              <p>共订货{{item.SupplierPoQty}}{{item.SupplierUnit}}  合计:<em class="def-color">￥{{item.Amount | fmoney}}</em></p>
            </div>
          </div>
          <p class="detail-mark ft17 no-line" v-if="todolist.Memo"><em class="ft17">备注留言：</em><i class="gray">{{todolist.Memo}}</i></p>
          <div class="detail-num">
            <em v-if="todolist.CountSum>0">共{{todolist.CountSum}}种商品</em>小计:<span class="red">￥{{(amount || todolist.DetailSum) | fmoney}}</span>
          </div>
          <!-- <div class="detail-num no-line" v-if="todolist.BillState == 'P03'">
            <div class="btn org" @click="outStock">缺货</div>
            <div class="btn red">无货</div>
          </div> -->
        </div>
        <div class="detail-customs">
          <p>要求到货日期：{{todolist.PlanEndDate | time}}
            <span v-if="todolist.BillState!='P07' && todolist.BillState!='P10'">（{{todolist.PlanEndDate | jsDateDiff}}）</span>
          </p>
          <p>下单时间：{{todolist.BillDate | timeshort}}</p>
        </div>
        <!-- <div class="detail-goods-list">
          <div class="displayflex list-goods-warp">
            <div class="pic">
              <img src="">
            </div>
            <div class="msg flex1">
              <p class="ft17">药名字</p>
              <p>规格</p>
              <p>厂商</p>
              <p class="list-tag drug">
                <em class="tag">采购价</em>
                <i class="price">￥123.00</i>
              </p>
              <p>共订货10盒  合计:<em class="def-color">￥48000.00</em></p>
            </div>
          </div>
          <p class="detail-mark ft17">缺货原因：库存商品不足</p>
          <div class="tag-state"><img src="~images/icon/tag_qh.png"></div>
        </div> -->
        <div class="detail-bottom" v-if="todolist.BillState == 'P03'">
          <!-- <div class="btn red" @click="recall">撤回</div> -->
          <div class="btn org" @click="outStockfb">缺货反馈</div>
          <div class="btn" @click="invoice">开票</div>
        </div>
      </div>
      <!-- <template v-if="!tab">
        <feed-back :guid="todolist.Guid"></feed-back>
      </template> -->
    </template>
    <!-- <confirm 
      v-model="showRecall"
      title="您确定要撤回此订单？"
      @on-cancel="onCancel"
      @on-confirm="onConfirm"
      @on-show="onShow"
      @on-hide="onHide">
      <textarea placeholder="备注" 
                class="pop-txtarea mt10 mb10"
                v-model="recallMsg"></textarea>
    </confirm> -->
    <template v-if="!tab">
      <feed-back :guid="todolist.Guid" :billno='todolist.BillNo'></feed-back>
    </template>

  </div>
</template>

<script>
import detailHeader from '@/components/core/header/detail_header.vue';
import feedBack from '@/components/share/billfb/billfb.vue';
import voiceMsg from '@/components/share/voiceMsg/voicemsg.vue';
import appHeader from '@/components/core/header/app_header.vue';
export default {
  name:'erpDetail',
  components: {
    detailHeader,
    feedBack,
    voiceMsg,
    appHeader
  },
  data() {
    return {
      tab:true,
      showRecall:false,
      recallMsg:'',
      recallBillShow:false,
      tododetail:[],
      erpNum:'',
      todolist:[],
    }
  },
  computed:{
    amount(){
      var total=0;
      for(var i = 0;i<this.tododetail.length;i++){
        total = total+this.tododetail[i].Amount;
      };
      return total;
    },
  },
  created(){
    this.getDate();
  },
  methods: {
    //获取详情
    getDate(){
      var self = this;
      var query = {
        Guid: this.$route.query.id,
      };
      this.Ajax.post('SearchOrderDetailGuid', query).then(function(resp) {
        self.tododetail = resp.Datas;
      });
      this.Ajax.post("SearchOrderGuidNew", query).then(function(resp) {
        self.todolist = resp.Data;
      });
    },
    outStock(){
      this.$router.push({
        path:'/order/outStock'
      })
    },
    outStockfb(){
      this.$router.push({
        path:'/feedback',
        query:{
          id:this.todolist.Guid,
          billno:this.todolist.BillNo,
          type:'erp'
        }
      })
    },
    recall(){
      this.showRecall = true;
    },
    onCancel () {
      this.recallMsg = '';
    },
    onConfirm (msg) {
      this.recallBillShow = true;
    },
    onHide () {
      this.recallMsg = '';
    },
    onShow () {
      this.recallMsg = '';
    },
    invoiceF(){
      var self = this;
      var userinfo = JSON.parse(localStorage.userinfo);
      var query = {
        Guid: this.todolist.Guid,
        BuyerGUID: userinfo.StaffID,
        BuyerName: userinfo.Name,
        BillState: 'P08',
        type:'1',
        FeedbackGUID: userinfo.StaffID,
        FeedbackName: userinfo.Name,
        BillNo:this.erpNum,
      };
      this.Ajax.post('OrderAcceptance',query).then(function(resp){
        if (resp.IsSuccess) {
          self.MessageBox.alert('开票成功').then(action => {
            self.$router.go(-1);
          });
        } else {
          self.Toast({
            message: resp.ErrorMessage||'操作失败，请稍后重试',
          });
        }
      });
    },
    //开票操作
    invoice(){
      var self = this;
      if(!this.erpNum){
        this.MessageBox.confirm('是否输入ERP订单号?').then(action => {
          $("#erpNum").focus();
        }).catch((cancel)=>{
          self.invoiceF();
        });
      }else{
        var query = {
          Guid: this.todolist.Guid,
          BillNo:this.erpNum,
        }
        this.Ajax.post('CheckDuperpNum',query).then(function(resp){
          if (resp.IsSuccess) {
            self.invoiceF();
          } else {
            self.Toast({
              message: resp.ErrorMessage ||'操作失败，请稍后重试',
            });
          }
        });
        
      }
    }
  }
}
</script>